
<div class="alert alert-info-light" style="width: 40%;">
    <b class="text-red">当前分组: {$group_name}</b> <br>
    <b class="text-red">提示: 页面初始全部数据, 点击查询其他分组, 如需返回按F5刷新或点重置按钮, 即可显示全部数据</b> <br>
</div>
<form action="" class="form-commonsearch" role="form">
	<div style="border-radius:2px;margin-bottom:10px;background:#f5f5f5;padding:15px 20px;">
		<hr>
		<div class="row">
			<div class="col-xs-12 col-sm-6 col-md-3">
				<div class="form-group">
					<label class="control-label">分组</label>
					<input id="c-groupIds" data-source="auth/group/index" class="form-control selectpage" name="groupIds" type="text" value="">
				</div>
			</div>
			
			<!-- <div class="col-xs-12 col-sm-6 col-md-3">
				<div class="form-group">
					<label class="control-label">日期</label>
					<div>
					<input type="text" class="form-control datetimepicker" name="createtime" data-date-format="YYYY-MM-DD" value=""/>
					</div>
				</div>
			</div> -->
			<div class="col-xs-12 col-sm-6 col-md-3">
				<div class="form-group">
					<label class="control-label"></label>
					<div class="row">
						<div class="col-xs-6">
							<input type="submit" class="btn btn-success btn-block" value="查询"/>
						</div>
						<div class="col-xs-6">
							<input type="button" class="btn btn-default btn-block refreshs" value="重置"/>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</form>


<h3 class="text-red">=====养号带货=====</h3>

<div class="row wanlcard">
    <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-card-blue">
            <div class="inner">
				<h3>设备数</h3>
                <h3>{$retval.device_count|default=0}</h3>
                <h4>设备录入数量</h4>
            </div>
            <div class="icon">
                <i class="fa fa-sitemap"></i>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-card-red">
            <div class="inner">
    			<h3>账号数</h3>
    			<h3>{$retval.account_count}</h3>
    			<h4>设备关联的账号数量</h4>
            </div>
            <div class="icon">
                <i class="fa fa-skyatlas"></i>
            </div>
        </div>
    </div>
	<div class="col-lg-3 col-xs-6">
	    <div class="small-box bg-card-violet">
	        <div class="inner">
				<h3>成交总量</h3>
    			<h3>{$retval.total_turnover}</h3>
    			<h4>成交总量</h4>
	        </div>
	        <div class="icon">
	            <i class="fa fa-bar-chart-o"></i>
	        </div>
	    </div>
	</div>
	<div class="col-lg-3 col-xs-6">
	    <div class="small-box bg-card-primary">
	        <div class="inner">
				<h3>成交总佣金</h3>
    			<h3>￥{$retval.total_amount}</h3>
    			<h4>成交总佣金</h4>
	        </div>
	        <div class="icon">
	            <i class="fa fa-rmb"></i>
	        </div>
	    </div>
	</div>
</div>

<!-- 今日 -->
<div class="row">
    <div class="col-xs-12">
        <div class="row">
            <div class="col-xs-3" style="margin-bottom:15px;">
                <div class="panel panel-default panel-intro panel-statistics">
                    <div class="panel-body">
                        <h3>今日粉丝数</h3>
                        <h4>{$retval.today_data.fans|default=0}</h4>
                    </div>
                </div>
            </div>
			<div class="col-xs-3" style="margin-bottom:15px;">
			    <div class="panel panel-default panel-intro panel-statistics">
			        <div class="panel-body">
			            <h3>今日播放量</h3>
			            <h4>{$retval.today_data.play_num|default=0}</h4>
			        </div>
			    </div>
			</div>
            <div class="col-xs-3" style="margin-bottom:15px;">
                <div class="panel panel-default panel-intro panel-statistics">
                    <div class="panel-body">
                        <h3>今日成交总量</h3>
                        <h4>{$retval.today_count.turnover|default=0}</h4>
                    </div>
                </div>
            </div>
            <div class="col-xs-3" style="margin-bottom:15px;">
                <div class="panel panel-default panel-intro panel-statistics">
                    <div class="panel-body">
                        <h3>今日成交佣金</h3>
						<h4>￥{$retval.today_count.amount|default=0}</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<h3 class="text-red">=====中视频=====</h3>

<div class="row wanlcard">
	<div class="col-lg-3 col-xs-6">
	    <div class="small-box bg-card-blue">
	        <div class="inner">
				<h3>视频佣金</h3>
    			<h3>￥{$retval.video_total_amount}</h3>
    			<h4>视频总佣金</h4>
	        </div>
	        <div class="icon">
	            <i class="fa fa-rmb"></i>
	        </div>
	    </div>
	</div>
</div>

<div class="row">
    <div class="col-xs-12">
        <div class="row">
			<div class="col-xs-3" style="margin-bottom:15px;">
                <div class="panel panel-default panel-intro panel-statistics">
                    <div class="panel-body">
                        <h3>今日播放数</h3>
                        <h4>{$retval.today_mid_video.play_num|default=0}</h4>
                    </div>
                </div>
            </div>
            <div class="col-xs-3" style="margin-bottom:15px;">
                <div class="panel panel-default panel-intro panel-statistics">
                    <div class="panel-body">
                        <h3>今日视频佣金</h3>
						<h4>￥{$retval.today_mid_video.amount|default=0}</h4>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- 排行榜 -->
<div class="row wanllist">
	<div class="col-xs-12 col-sm-3  {:$auth->check('fansrank')?'':'hide'}">
	    <div class="panel panel-default panel-intro panel-statistics">
	        <div class="panel-body">
	            <h4>粉丝总排行榜(前{$limit})</h4>
	            <table class="table" style="width:100%">
	                <thead>
	                <tr>
	                    <th class="text-left">负责人</th>
	                    <th class="text-right" width="50px">数量</th>
	                </tr>
	                </thead>
	                <tbody>
                        {foreach name="fansRank" id="item" empty="<tr><td colspan='2' class='text-center'>暂无数据</td></tr>"}
	                	<tr>
	                		<td class="vertical text-left">
								{$item.rank}. {$item.nickname}
	                		</td>
	                		<td class="vertical text-right">
	                			{$item.fans}
	                		</td>
	                	</tr>
	                	{/foreach}
	                </tbody>
	            </table>
	        </div>
	    </div>
	</div>
    <div class="col-xs-12 col-sm-3">
	    <div class="panel panel-default panel-intro panel-statistics">
	        <div class="panel-body">
	            <h4>成交佣金排行榜(前{$limit})</h4>
	            <table class="table" style="width:100%">
	                <thead>
	                <tr>
	                    <th class="text-left">负责人</th>
	                    <th class="text-right" width="50px">金额</th>
	                </tr>
	                </thead>
	                <tbody>
	                	{foreach name="amountRank" id="item" empty="<tr><td colspan='2' class='text-center'>暂无数据</td></tr>"}
	                	<tr>
	                		<td class="vertical text-left">
								{$item.rank}. {$item.nickname}
	                		</td>
	                		<td class="vertical text-right">
	                			{$item.amount}
	                		</td>
	                	</tr>
	                	{/foreach}
	                </tbody>
	            </table>
	        </div>
	    </div>
	</div>

    <div class="col-xs-12 col-sm-3">
	    <div class="panel panel-default panel-intro panel-statistics">
	        <div class="panel-body">
	            <h4>成交量排行榜(前{$limit})</h4>
	            <table class="table" style="width:100%">
	                <thead>
	                <tr>
	                    <th class="text-left">负责人</th>
	                    <th class="text-right" width="50px">数量</th>
	                </tr>
	                </thead>
	                <tbody>
	                	{foreach name="turnoverRank" id="item" empty="<tr><td colspan='2' class='text-center'>暂无数据</td></tr>"}
	                	<tr>
	                		<td class="vertical text-left">
								{$item.rank}. {$item.nickname}
	                		</td>
	                		<td class="vertical text-right">
	                			{$item.turnover}
	                		</td>
	                	</tr>
	                	{/foreach}
	                </tbody>
	            </table>
	        </div>
	    </div>
	</div>

	<div class="col-xs-12 col-sm-3">
	    <div class="panel panel-default panel-intro panel-statistics">
	        <div class="panel-body">
	            <h4>中视频佣金排行榜(前{$limit})</h4>
	            <table class="table" style="width:100%">
	                <thead>
	                <tr>
	                    <th class="text-left">负责人</th>
	                    <th class="text-right" width="50px">金额</th>
	                </tr>
	                </thead>
	                <tbody>
	                	{foreach name="mid_video_amountRank" id="item" empty="<tr><td colspan='2' class='text-center'>暂无数据</td></tr>"}
	                	<tr>
	                		<td class="vertical text-left">
								{$item.rank}. {$item.nickname}
	                		</td>
	                		<td class="vertical text-right">
	                			{$item.amount}
	                		</td>
	                	</tr>
	                	{/foreach}
	                </tbody>
	            </table>
	        </div>
	    </div>
	</div>
</div>


<div class="wanlshop" style="height: 20px;"> </div>

<style type="text/css">
	[v-cloak] { display: none }
	.bg-card-blue{
		background: linear-gradient(-125deg, #57bdbf, #2f9de2);
		color: #ffffff;
	}
	.bg-card-red{
		background: linear-gradient(-125deg, #ff7d7d, #fb2c95);
		color: #ffffff;
	}
	.bg-card-violet {
	    background: linear-gradient(-113deg, #c543d8, #925cc3);
		color: #ffffff;
	}
	.bg-card-primary {
	    background: linear-gradient(-141deg, #ecca1b, #f39526);
		color: #ffffff;
	}
	.wanlcard .small-box,.panel{
		border-radius: 10px;
        margin-top: 20px;
	}
	.wanlcard .small-box > .inner{
		padding: 15px 22px;
	}
	.wanlcard .small-box > .inner p:last-child{
		font-size: 12px;
	}
	.wanlcard .small-box p{
		font-size: 14px;
		margin: 10px 0;
	}
	.wanlcard .small-box h3{
		font-weight: 100;
	}
	.wanlcard .small-box .icon{
		color: rgba(255, 255, 255, 0.16);
		right: 22px;
	}
	
	.small-box .icon{
		font-size: 80px;
	}
	
	.panel-statistics h3 {
	    font-weight: 500;
	    font-size: 14px;
	    color: #333;
		margin-top: 9.2px;
	}
	
	.panel-statistics h4{
		color: #666;
		font-weight: 400;
		font-size: 14px;
	}
	.panel-btn{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: -9px;
	}
	.wanl-order .panel{
		background: linear-gradient(-125deg, #57bdbf, #2f9de2);
	}
	.wanl-order .panel h3{
		font-weight: 500;
	}
	.wanl-order .panel h3, .wanl-order .panel h4{
		color: #ffffff;
	}
	.wanl-order .pull-left .fa{
		color: #ffffff;
		font-size: 30px;
	}
	.wanllist .panel-statistics h4 {
	    color: #555;
	    font-weight: bold;
	    font-size: 18px;
	}
	.wanllist .panel-statistics thead{
		color: #777777;
	}
	.vertical{
		vertical-align: middle;
	}
	
	.table > thead > tr > th, 
	.table > thead > tr > td, 
	.table > tbody > tr > th, 
	.table > tbody > tr > td
	{
		padding: 12px 0;
		font-weight: initial;
	}
	
	.table > tbody > tr > td:first-child {
		color: #666666;
	}
</style>
